<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width,initial-scale=1.0" name="viewport"/>
    <link href="<%= BASE_URL %>favicon.ico" rel="icon">
    <title>MK的博客...(*￣０￣)ノ</title>
</head>
<body>
<section id="appLoading">
    <div class='sk-folding-cube'>
        <div class='sk-cube sk-cube-1'></div>
        <div class='sk-cube sk-cube-2'></div>
        <div class='sk-cube sk-cube-4'></div>
        <div class='sk-cube sk-cube-3'></div>
    </div>
</section>
<div id="app"></div>
</body>
</html>
<style>
    html,
    body,
    #app {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    #appLoading{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
    }

    /* 滚动条默认显示样式 */
    ::-webkit-scrollbar-thumb {
        background-color: #03a9f4;
        height: 50px;
        outline-offset: -2px;
        outline: 2px solid #cddc39;
        -webkit-border-radius: 4px;
        border: 2px solid #fff;
    }

    /* 鼠标点击滚动条显示样式 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #00bcd4;
        height: 50px;
        -webkit-border-radius: 4px;
    }

    /* 滚动条模块大小 */
    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    /* 滚动框背景样式 */
    ::-webkit-scrollbar-track-piece {
        background-color: #fff;
        -webkit-border-radius: 0;
    }

    /* KEYFRAMES */

    @keyframes spin {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(359deg);
        }
    }

    @keyframes configure-clockwise {
        0% {
            transform: rotate(0);
        }
        25% {
            transform: rotate(90deg);
        }
        50% {
            transform: rotate(180deg);
        }
        75% {
            transform: rotate(270deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes configure-xclockwise {
        0% {
            transform: rotate(45deg);
        }
        25% {
            transform: rotate(-45deg);
        }
        50% {
            transform: rotate(-135deg);
        }
        75% {
            transform: rotate(-225deg);
        }
        100% {
            transform: rotate(-315deg);
        }
    }

    @keyframes pulse {
        from {
            opacity: 1;
            transform: scale(1);
        }
        to {
            opacity: .25;
            transform: scale(.75);
        }
    }

    section {
        flex: 1 1 25%;
    }


    @-webkit-keyframes sk-rotating-plane {
        0% {
            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        }
        50% {
            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        }
        100% {
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
    }

    @keyframes sk-rotating-plane {
        0% {
            -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        }
        50% {
            -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        }
        100% {
            -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        }
    }

    @-webkit-keyframes sk-double-bounce {
        0%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        50% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes sk-double-bounce {
        0%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        50% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @-webkit-keyframes sk-wave-stretch-delay {
        0%, 40%, 100% {
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }
        20% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }

    @keyframes sk-wave-stretch-delay {
        0%, 40%, 100% {
            -webkit-transform: scaleY(0.4);
            transform: scaleY(0.4);
        }
        20% {
            -webkit-transform: scaleY(1);
            transform: scaleY(1);
        }
    }
    .sk-wandering-cubes .sk-cube {
        background-color: #5cadff;
        width: 1em;
        height: 1em;
        position: fixed;
        top: 0;
        left: 0;
        margin: auto;
        -webkit-animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both;
        animation: sk-wandering-cubes 1.8s ease-in-out -1.8s infinite both;
    }
    .sk-wandering-cubes .sk-cube-2 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    @-webkit-keyframes sk-wandering-cubes {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        25% {
            -webkit-transform: translateX(2em) rotate(-90deg) scale(0.5);
            transform: translateX(2em) rotate(-90deg) scale(0.5);
        }
        50% {
            /* Hack to make FF rotate in the right direction */
            -webkit-transform: translateX(2em) translateY(2em) rotate(-179deg);
            transform: translateX(2em) translateY(2em) rotate(-179deg);
        }
        50.1% {
            -webkit-transform: translateX(2em) translateY(2em) rotate(-180deg);
            transform: translateX(2em) translateY(2em) rotate(-180deg);
        }
        75% {
            -webkit-transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
            transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
        }
        100% {
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }

    @keyframes sk-wandering-cubes {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        25% {
            -webkit-transform: translateX(2em) rotate(-90deg) scale(0.5);
            transform: translateX(2em) rotate(-90deg) scale(0.5);
        }
        50% {
            /* Hack to make FF rotate in the right direction */
            -webkit-transform: translateX(2em) translateY(2em) rotate(-179deg);
            transform: translateX(2em) translateY(2em) rotate(-179deg);
        }
        50.1% {
            -webkit-transform: translateX(2em) translateY(2em) rotate(-180deg);
            transform: translateX(2em) translateY(2em) rotate(-180deg);
        }
        75% {
            -webkit-transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
            transform: translateX(0) translateY(2em) rotate(-270deg) scale(0.5);
        }
        100% {
            -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
        }
    }

    @-webkit-keyframes sk-spinner-pulse {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0;
        }
    }

    @keyframes sk-spinner-pulse {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 0;
        }

    }

    @-webkit-keyframes sk-chasing-dots-rotate {
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes sk-chasing-dots-rotate {
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @-webkit-keyframes sk-chasing-dots-bounce {
        0%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        50% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    @keyframes sk-chasing-dots-bounce {
        0%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        50% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }


    @-webkit-keyframes sk-three-bounce {
        0%, 80%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes sk-three-bounce {
        0%, 80%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }



    @-webkit-keyframes sk-circle-bounce-delay {
        0%, 80%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    @keyframes sk-circle-bounce-delay {
        0%, 80%, 100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }

    .sk-cube-grid .sk-cube {
        width: 33%;
        height: 33%;
        background-color: #5cadff;
        float: left;
        -webkit-animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
        animation: sk-cube-grid-scale-delay 1.3s infinite ease-in-out;
    }

    .sk-cube-grid .sk-cube-2 {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }
    .sk-cube-grid .sk-cube-3 {
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }
    .sk-cube-grid .sk-cube-4 {
        -webkit-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }


    @-webkit-keyframes sk-cube-grid-scale-delay {
        0%, 70%, 100% {
            -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
        }
        35% {
            -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
        }
    }

    @keyframes sk-cube-grid-scale-delay {
        0%, 70%, 100% {
            -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
        }
        35% {
            -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
        }
    }

    @-webkit-keyframes sk-fading-circle-delay {
        0%, 39%, 100% {
            opacity: 0;
        }
        40% {
            opacity: 1;
        }
    }

    @keyframes sk-fading-circle-delay {
        0%, 39%, 100% {
            opacity: 0;
        }
        40% {
            opacity: 1;
        }
    }
    .sk-folding-cube {
        width: 4em;
        height: 4em;
        position: relative;
        margin: auto;
        -webkit-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
    }
    .sk-folding-cube .sk-cube {
        float: left;
        width: 50%;
        height: 50%;
        position: relative;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
    .sk-folding-cube .sk-cube:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #5cadff;
        -webkit-animation: sk-folding-cube-angle 2.4s infinite linear both;
        animation: sk-folding-cube-angle 2.4s infinite linear both;
        -webkit-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }
    .sk-folding-cube .sk-cube-2 {
        -webkit-transform: scale(1.1) rotateZ(90deg);
        transform: scale(1.1) rotateZ(90deg);
    }
    .sk-folding-cube .sk-cube-3 {
        -webkit-transform: scale(1.1) rotateZ(180deg);
        transform: scale(1.1) rotateZ(180deg);
    }
    .sk-folding-cube .sk-cube-4 {
        -webkit-transform: scale(1.1) rotateZ(270deg);
        transform: scale(1.1) rotateZ(270deg);
    }
    .sk-folding-cube .sk-cube-2:before {
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }
    .sk-folding-cube .sk-cube-3:before {
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
    }
    .sk-folding-cube .sk-cube-4:before {
        -webkit-animation-delay: 0.9s;
        animation-delay: 0.9s;
    }

    @-webkit-keyframes sk-folding-cube-angle {
        0%, 10% {
            -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            opacity: 0;
        }
        25%, 75% {
            -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            opacity: 1;
        }
        90%, 100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
    }

    @keyframes sk-folding-cube-angle {
        0%, 10% {
            -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
            opacity: 0;
        }
        25%, 75% {
            -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
            opacity: 1;
        }
        90%, 100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
    }

</style>
